
$(function () {
    // 定义全局变量:当前编辑的数据的id
    let editId
    getList()
    function getList() {
        let index = null
        index = layer.load(3, { time: 200 })
        $.ajax({
            url: 'http://localhost:8080/api/v1/admin/category/list',
            headers: {
                Authorization: localStorage.getItem('token')
            },
            success: function (res) {
                if (res.code === 200) {
                    const list = res.data
                    console.log(list)
                    let html = template('trTemp', { data: list })
                    $('.category_table tbody').html(html)
                } else {
                    console.log('获取不成功')
                }
            }
        })
    }

    $('#myModal .btn_opt').on('click', function () {
        let name = $('[name="name"]').val().trim()
        let slug = $('[name="slug"]').val().trim()
        $.ajax({
            url: 'http://localhost:8080/api/v1/admin/category/add',
            type: 'post',
            data: { name, slug },
            headers: { Authorization: localStorage.getItem('token') },
            success(res) {
                if (res.code === 200) {
                    console.log(res.msg)
                    // 清空表单内容,如果不清除下一次添加还是存在上一次数据
                    $('[name="name"]').val('')
                    $('[name="slug"]').val('')
                    $('#myModal').modal('hide')
                    getList()
                } else {
                    console.log(res.msg)
                    alert(res.msg)
                }
            }
        })
    })

    // 编辑按钮事件,利用事件委托
    $('.category_table').on('click', '.edit', function () {
        $('#editModal').modal('show')
        // 获取绑定到tr标签的对象数据
        let value = $(this).parents('tr').data('value')
        // 将数据填充到模态框   
        $('#name').val(value.name)
        $('#slug').val(value.slug)
        // 传入id
        editId = value.id
    })

    // 编辑框保存按钮事件
    $('#editModal .btn_opt').on('click', function () {
        console.log(editId)
        const name = $('#name').val()
        const slug = $('#slug').val()
        $.ajax({
            url: 'http://localhost:8080/api/v1/admin/category/edit',
            type: 'post',
            data: {
                // 传入参数,属性名是id,值是editId
                id: editId,
                name, slug
            },
            headers: { Authorization: localStorage.getItem('token') },
            success(res) {
                if (res.code === 200) {

                    $('#editModal').modal('hide')
                    getList()
                } else {
                    console.log('失败')
                }
            }
        })
    })

    // 删除按钮事件
    $('.category_table').on('click', '.delete', function () {
        // 弹出一个确认框,箭头函数解决this指向问题
        layer.confirm('是否删除?', { title: '注意', }, (index) => {
            const id = $(this).data('value').id
            console.log(this)
            $.ajax({
                url: 'http://localhost:8080/api/v1/admin/category/delete',
                type: 'post',
                data: { id },
                headers: { Authorization: localStorage.getItem('token') },
                success(res) {
                    if (res.code === 200) {
                        // 关闭确认框
                        layer.close(index)
                        getList()
                    } else {
                        console.log('删除失败')
                    }
                }
            })
        })
    })
})